import React, { Component } from 'react';
import axios from "axios"
import '../../App.css'

class Tesing extends Component {
    constructor(props){
        super(props)
        console.log("构造函数阶段")
        this.state={
            msg:"🦏",
            data:[]
        }
        this.ref=React.createRef();
        this.ber=React.createRef();
        // 创建的Ref可以通过thuis.命名的名
        console.log(this)
        // 修改事件this指向
        this.handleClick=this.handleClick.bind(this)
    }
    static getDerivedStateFromProps(props, state){
        console.log("挂载时的二阶段",props, state)
        return null
    }
    handleClick=()=>{
        console.log("执行 handleClick")
    }
    render() {
        console.log("渲染阶段")
        return (
            <div className="action">
                {/* 挂载时生命周期的作用 */}
                <div className="outerBox" id="outerBox">
                    <div className="innerBox"></div>
                </div>
                <input type="text" ref={this.ref} />
                <input type="text" ber={this.ref} />
                {
                    this.state.data.map(v=>{
                        return <img src={v.img} alt="" key={v.bannerid}/>
                    })
                }
            </div>
        );
    }
    // 组件 挂载 Dom树上
    componentDidMount(){
        console.log("挂载到Dom树上时")
        // 请求数据
        axios.get("http://daxun.kuboy.top/api/banner").then((result) => {
            console.log(result.data.data)
            this.setState({
                data:result.data.data
            })
        }).catch((err) => {
            console.log(err)
        });
        document.getElementById("outerBox").addEventListener("scroll",function(e){
            console.log("盒子滚动啦",e)
        })
    }
}

export default Tesing;